实践篇实现mini Router|React进阶专题 | 前端进阶之旅

# 一前言

本章节，我们会从 0 到 1 实现一个 React 路由功能，这里可以称之为 mini-Router。实现的过程中会包含如下知识点：

路由更新流程与原理；
自定义 hooks 编写与使用；
context 实践；
hoc 编写与使用。

# 二设计思路

整个 mini-Router 还是采用 history 库，也就是 mini-Router 需要完成的是 React-Router 和 React-Router-DOM 核心部分。今天编写的 mini-Router 是在 BrowserHistory 模式下。

# 1 建立目标

接下来要实现的具体功能如下：

组件层面： 在组件层面，需要实现提供路由状态的 Router ，控制渲染的 Route ，匹配唯一路由的 Switch 。
api层面： 提供获取 history 对象的 useHistory 方法，获取 location 对象的 useLocation 方法。
高阶组件层面： 对于不是路由的页面，提供 withRouter，能够获取当前路由状态。
额外功能： 之前有很多同学问过我，在 React 应用中，可不可以提供有方法监听路由改变，所以 mini-Router 需要做的是增加路由监听器，当路由改变，触发路由监听器。

# 2 设计功能图

# 三代码实现

# 1 组件层面

提供路由更新派发——Router

import React ,{ useCallback, useState , useEffect ,createContext, useMemo  } from 'react'
import { createBrowserHistory as createHistory  } from 'history'

export const RouterContext = createContext()
export let rootHistory = null

export default function Router(props){
     /* 缓存history属性 */
     const history = useMemo(() => {
          rootHistory = createHistory()
          return rootHistory
     },[])
     const [ location, setLocation ] = useState(history.location)
     useEffect(()=>{
          /* 监听location变化，通知更新 */
          const unlisten = history.listen((location)=>{
               setLocation(location)
          })
          return function () {
               unlisten && unlisten()
          }
     },[])
     return <RouterContext.Provider
         value={{
               location,
               history,
               match: { path: '/', url: '/', params: {}, isExact: location.pathname === '/' }
          }}
            >
          {props.children}
     </RouterContext.Provider>
}

# 一 前言